{block name=classterm-panel-makeup}
    <div id="enroltrialmain">
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2">

                <div class="row">
                    <form id="{if $form_id}{$form_id}{else}search-classes-form{/if}"
                          method="{if $form_method}{$form_method}{else}get{/if}" action="">
                        <input type="hidden" value="{if $type}{$type}{else}S{/if}" name="type" class="enrolment-type"/>
                        <input type="hidden" value="true" name="surrounding"/>
                        <input type="hidden" value="" name="term_object_id" class="same_term"/>
                        {if $action}
                            <input type="hidden" value="{$action}" name="action"/>
                            <input type="hidden" name="formToken" value="{$token}"/>
                        {/if}
                        {if $selectClassOption}
                            <input type="hidden" value="{$selectClassOption}" name="selectClassOption"/>
                        {/if}

                        <!-- <div class="col-sm-6">
						<label>Child's D.O.B.:</label>
						<div>
						<span class="form-group">
							<select id="dobday" name="day" class="form-control selstyle">
								<option value="">Day</option>
								{for $day=1 to 31}
									<option value="{$day}" {if $search.day eq $day}selected="selected"{/if}>{$day}</option>
								{/for}
							</select>
						</span>
						<span class="form-group" id="monthout">
							<select id="dobmonth" name="month" class="form-control selstyle">
									<option value="">Month</option>
									<option value="1" {if $search.month eq 1}selected="selected"{/if}>Jan</option>
									<option value="2" {if $search.month eq 2}selected="selected"{/if}>Feb</option>
									<option value="3" {if $search.month eq 3}selected="selected"{/if}>Mar</option>
									<option value="4" {if $search.month eq 4}selected="selected"{/if}>Apr</option>
									<option value="5" {if $search.month eq 5}selected="selected"{/if}>May</option>
									<option value="6" {if $search.month eq 6}selected="selected"{/if}>Jun</option>
									<option value="7" {if $search.month eq 7}selected="selected"{/if}>Jul</option>
									<option value="8" {if $search.month eq 8}selected="selected"{/if}>Aug</option>
									<option value="9" {if $search.month eq 9}selected="selected"{/if}>Sep</option>
									<option value="10" {if $search.month eq 10}selected="selected"{/if}>Oct</option>
									<option value="11" {if $search.month eq 11}selected="selected"{/if}>Nov</option>
									<option value="12" {if $search.month eq 12}selected="selected"{/if}>Dec</option>
							</select>
						</span>
						<span class="form-group">
							<select id="dobyear" name="year" class="form-control selstyle">
								<option value="">Year</option>
								{assign var=initYear value='Y'|date}
								{for $year=$initYear-7 to $initYear}
									<option value="{$year}" {if $search.year eq $year}selected="selected"{/if}>{$year}</option>
								{/for}
							</select>
						</span>
						</div>
						</div> -->
                        <style type="text/css">
                            .selectricWrapper {
                                width: 100%;
                            }
                        </style>
                        <div class="col-sm-12 text-center">
                            <label for="enrolsuburb">选择您所在的地区*:</label>
                            <div class="form-group nomargin" id="location">
                                {*<input type="text" class="form-control" id="enrolsuburb" name="location" value="{$search.location}" required/>*}
                                <span class="form-group col-sm-3">
								<select name="state" class="form-control selstyle state1" data-studentId="{$student}">
								{foreach from=$states item=state}
                                    <option value="{$state.id}"
                                            {if $search.state eq $state.value}selected="selected"{/if}>{$state.value}</option>
                                {/foreach}
								</select>
							</span>
                                <span class="form-group col-sm-3">
								<select name="suburb" class="form-control selstyle suburb1">
								{foreach from=$suburbs item=suburb}
                                    {$suburb}
                                    <option value="{$suburb.id}"
                                            {if $search.suburb eq $suburb.value}selected="selected"{/if}>{$suburb.value}</option>
                                {/foreach}
								</select>
							</span>
                                <span class="form-group col-sm-6">
								<select name="country" class="form-control selstyle country1">
								{foreach from=$countries item=country}
                                    <option value="{$country.id}"
                                            {if $search.country eq $country.value}selected="selected"{/if}>{$country.value}</option>
                                {/foreach}
								</select>
							</span>
                            </div>
                        </div>

                        <div class="col-sm-12 text-center">
                            <button class="btn btn-default btn-black" type="submit"><span>搜索课程</span></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
            // $("select#state").change(function(){
            // 	var id = $('select#state option:selected').val();
            // 	$.ajax({
            // 		url: "/process/regionsuburbs",
            //         dataType: "json",
            //         data: {
            //           query: id
            //         },
            //         success: function( data ) {
            //         	console.log(data);
            //         	$("select#suburb").html("");
            //             for(var i=0;i<data.length;i++){
            //                 $("select#suburb").append("<option value='"+data[i].value+"'>"+data[i].text+"</option>");
            //                 $("select#suburb").selectric('refresh');
            //             }
            //         }
            // 	});
            // });

            function autoFun($id){
                jQuery(document).ready(function($) {
                    if ($id) {
                        var oProvinces = $($id + " select.state1");
                        var oCitys = $($id + " select.suburb1");
                        var oCountrys = $($id + " select.country1");
                    } else {
                        var oProvinces = $("select.state1");
                        var oCitys = $("select.suburb1");
                        var oCountrys = $("select.country1");
                    }
                    var city = function (_this) {
//        var n = oProvinces.get(0).selectedIndex;
                        var id = $(_this).find("option:selected").val();
                        console.log(id);
                        $.ajax({
                            url: "/process/regionsuburbs",
                            dataType: "json",
                            data: {
                                query: id
                            },
                            success: function (data) {
                                console.log(data);
                                //oCity.data("selectBox-selectBoxIt").remove();
                                //oCity.data("selectBox-selectBoxIt").add(data);
                                var oCity = $(_this).parent().parent().parent().parent().find("select.suburb1");
//				console.log(oCity);
                                oCity.html("");
                                for (var i = 0; i < data.length; i++) {
                                    oCity.append("<option value='" + data[i].value + "'>" + data[i].text + "</option>");
//                                    if (window.location.pathname.indexOf("members/convert") == -1) {
//                                        oCity.selectric('refresh');
//                                    }
                                    oCity.selectric('refresh');
                                }
                                district(_this);
                            }
                        });
                    }

                    var district = function (_this) {
//        var n = oCitys.get(0).selectedIndex;
                        var id = $(_this).find("option:selected").val();
                        $.ajax({
                            url: "/process/regionsuburbs",
                            dataType: "json",
                            data: {
                                query: id
                            },
                            success: function (data) {
//                console.log(data);
                                //oCountry.data("selectBox-selectBoxIt").remove();
                                //oCountry.data("selectBox-selectBoxIt").add(data);
                                var oCountry = $(_this).parent().parent().parent().parent().find("select.country1");
                                oCountry.html("");
                                for (var i = 0; i < data.length; i++) {
                                    oCountry.append("<option value='" + data[i].value + "'>" + data[i].text + "</option>");
//                                    if (window.location.pathname.indexOf("members/convert") == -1) {
//                                        oCountry.selectric('refresh');
//                                    }
                                    oCountry.selectric('refresh');
                                }
                                if (data.length == 1) {
                                    oCitys.change();
                                }
                            }
                        });
                    }

                    oProvinces.change(function () {
                        city(this);
                    });

                    oCitys.change(function () {
                        district(this);
                    });

                    oProvinces.each(function () {
                        if ($(this).parent().parent().parent().parent().find("select.suburb1 option").length == 0) {
                            $(this).change();
                        }
                    });

                    if ($id == '') {
                        $('#{if $form_id}{$form_id}{else}search-classes-form{/if}').validate();
                        $('select.selstyle').selectric();
                        var availableTags = [{foreach $suburbs as $sb}"{$sb.value}", {/foreach}];
                        $("input[name='location']").autocomplete({
                            source: availableTags,
                            messages: {
                                noResults: '',
                                results: function () {

                                }
                            }
                        });
                    }
                })
            }

            if(window.location.pathname.indexOf("members/existing")==-1){
                autoFun();
            }

    </script>
{/block} 


 